/**
 * 参考地址
 * 百度富文本
 https://github.com/fex-team/ueditor#ueditor
 http://fex.baidu.com/ueditor/
 使用
 <!-- 配置文件 -->
 <script type="text/javascript" src="/static/vue/components/ueditor/ueditor.config.js"></script>
 <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="/static/vue/components/ueditor/ueditor.all.js"></script>
 <script src="/static/vue/components/ueditorTemplate.js"></script>

 that.$refs.companyIntroductionEditorRef.setContent(res.data.introduction) 设置
 that.$refs.companyIntroductionEditorRef.getContent() 获取

 如果用在vue的<el-form-item>这个标签里面 需要设置style="line-height:25px;" 不然那个toolbar太高了
 接口：默认修饰 public static final
 1.8之后接口可以有默认的实现的方法 用default 不要侧重于语法
 抽象类：例如抽取 常规的crud  basedao 抽象类可以有具体的实现 接口倾向于空实现的 固有的一些行为可以作为抽象类， 额外的功能可以用接口
 面向接口变成：例如serviceImpl如果不好用可以直接切换到serviceImpl2

 自动装拆箱：动装箱（autoboxing)缓存-128 127 valueOf

 如果再elementui中插入图片 需要加入层级的代码：
 //针对elementui的dialog的层级的 这个层级回递增的
  .el-dialog__wrapper{
    z-index:200 !important;
  }
  //针对elementui的dialog的层级的 这个层级回递增的
  .v-modal{
    z-index:100 !important;
  }
 .edui-default{
			z-index:9000 !important;
		}

 .edui-default .edui-dialog{
			z-index:9999 !important;
		}
 反显图片
 var golbalSrc = "";
 $(document).on("click", ".edui-okbutton", function () {
		var ue = UE.getEditor('mailEditor');
		let arr = golbalSrc.split('/>')
		var newStr = '';
		arr.forEach(function (item, index) {
			if (item != '') {
				newStr += '<p>' + item + '/></p >';
			}
		})
		ue.execCommand('insertHtml', newStr);
		golbalSrc = ""
	});
 $(document).on("click", ".edui-cancelbutton", function () {
		golbalSrc = ""
	});

 */
Vue.component('ueditor-template', {
  props:{
    parentModelName: {
      type: String,
      required: true
    },
    ueditorId: {
      type: String,
      required: true
    },
    showMenus: {
      type: Boolean,
      default: true
    },
    showFullScreen: {
      type: Boolean,
      default: true
    },
    showExpandButton: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      
    }
  },
  watch: {

  },
  mounted: function () {
    this.$nextTick(function () {
      let that = this;
      let ue = UE.getEditor(that.ueditorId,{
        wordCount:false,
      });
      ue.ready(function() {
        //ue.setWidth(1000);//这个代码很奇怪  加了上去，有些地方有问题，有些地方没有问题
        //ue.setHeight(600); //设置高度
      });
    });
   
  },
  methods: {

    /**
     * 设置内容
     */
    setContent(value) {
      let that = this;
      if(value){
        var ue = UE.getEditor(that.ueditorId);
        ue.ready(function() {
          ue.setContent(value);
        });
      }
    },

    //所有的html替换掉  #ueditor_0 这个具体看页面的代码 好像是ueditor自动生成的
    //可以查看你短信邮件模板的使用
    wholeUeditorReplaceHtml(jqueryId,content){
      if($(jqueryId).contents().find('body').length<=0){
        let ueditor = setInterval(function(){
          if($(jqueryId).contents().find('body').length>0){
            clearInterval(ueditor);
            $(jqueryId).contents().find('body').html(content);
            return;
          }

        },500);
      }else{
        $(jqueryId).contents().find('body').html(content);
      }
    },

    /**
     * 重置
     */
    resetContent(){
      let that = this;
      let ue = UE.getEditor(that.ueditorId);
      ue.ready(function() {
        ue.setContent("");
      });
    },

    /**
     * 获取内容
     */
    getContent() {
      let that = this;
      var ue = UE.getEditor(that.ueditorId);
      let html = "";
      ue.ready(function() {
        html = ue.getContent();
      });
      return html;
    },

    /**
     * summernote富文本的自动排版
     * selectName 是jquery的选择器
     */
    autoTypesettingSummernote() {
      this.setContent(this.reset(this.getContent()));
    },

    /**
     * 富文本下面的自动去掉所有链接的功能按钮
     * selectName 是jquery的选择器
     */
    autoRemoveAllLink() {
      let content = this.getContent();
      let reg = new RegExp("<a.*?>(.*?)</a>", "g");
      this.setContent(content.replace(reg, "$1"));
    },

    /**
     * 富文本的内容自动排版
     * content 富文本里面的内容
     * 这个东西在js/utilJs.js文件中存在了，以后想一下办法去掉
     * 正则表达式的g表示全部匹配  i表示 不区分大小写的匹配; m字符串视为多行
     * .*?满足条件的值匹配一次
     * 具体的含义请看utilsjs.js里面的 那个主版本
     */
    reset(content) {
      var reg = new RegExp("<a.*?>(.*?)</a>", "g");//<a.*?>这个?表示去除贪婪模式 匹配一次
      var r = /style="[^"]*"/g;
      content = content.replace(reg, "$1");//$1就是指上两行代码中的(.*?) 分组 这个主要是为了去掉a标签 但是不去掉a标签里面的内容
      content = content.replace(r, "$1");//这个代码这么写看不懂，$1用不到 因为r对应的正则没有分组的内容 这行代码相当于没有用
      content = content.replace(/div/gi, "p");//去掉div标签 变为p标签
      content = content.replace(/(<(?!(\/?(img|a|p)\b))[^>]*>)/gi, "");// ?!查找后面不是/img /a /p 这些结束标签 ， 把这些结束标签变为空串
      content = content.replace(/&nbsp;|[\s|　]+/gm, "");//去掉空格 手动空格变为空串
      //content = content.replace(/&nbsp; |[\s|　]+/gm, "");//去掉空格
      content = content.replace(/(^[\r\n]+)|([\r\n]+$)/g, "");//去掉换行符号(\r\n)
      content = content.replace(/([\r\n])+/gm, "</p>$1<p>　　");//多个回车换行 变为一个
      content = content.replace(/<p.*?>/gm, "<p>　　");//把p标签里面的内容 变为<p>
      return content;
    },
  },
  template: `
      <div>
        <script :id="ueditorId" name="content" type="text/plain" >                
        </script>
        <div style="margin-top:16px;" v-if="showExpandButton">
          <button type="button" @click="autoTypesettingSummernote" style="width: 115px;margin-right: 25px;">自动排版文本</button>
          <button type="button" @click="autoRemoveAllLink" style="width:115px;">去掉所有链接</button>
        </div>
      </div>   
    `
});